<template>
	<up-popup :show="show" :round="20" mode="bottom" @close="close" @open="open">
		<view class="content">
			<image src="/static/logo.jpg" mode="aspectFit" class="logo"></image>
			<view class="btn-box">
				<up-button v-if="aloneChecked" shape="circle" color="#E7B796" text="微信快捷登录" openType="getUserInfo" @getuserinfo="handleUserInfo"></up-button>
				<up-button v-else shape="circle" color="#E7B796" text="微信快捷登录" @click="agreementShowToast"></up-button>
			</view>
			<view class="text-btn" @click="show = false">暂不登录</view>
			<view class="agreement-box">
				<view class="checkbox-box">
					<up-checkbox shape="circle" name="agree" activeColor="#E7B796" usedAlone v-model:checked="aloneChecked"></up-checkbox>
				</view>
				<view class="text-box">
					我同意<text @click="toPage('/pages/agreement/user')">《用户服务协议》</text>和<text @click="toPage('/pages/agreement/privacy')">《隐私协议》</text>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	// 创建响应式数据  
	const show = ref(false);
	const aloneChecked = ref(false)
	const emits = defineEmits(['success'])

	// 定义方法  
	function open() {
		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
	}

	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
	}
	
	function toPage(url) {
		uni.navigateTo({
			url
		})
	}
	
	function handleUserInfo(detail) {
		const { iv } = detail.detail
		if (iv) {
			handelUserInfo(detail)
		} else {
			uni.showToast({
				icon: 'none',
				title: '授权失败，请稍后重试'
			})
		}
	}
	
	function agreementShowToast() {
		uni.showToast({
			icon: 'none',
			title: '请先同意用户服务协议'
		})
	}
	
	// 登录
	function handelUserInfo(detail) {
		uni.showLoading({
			title: '登录中'
		})
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				uni.request({
					url: `${getApp().globalData.baseUrl}/prod-api/wechat/weapp/loginByCode`,
					method: 'GET',
					data: {
						code: loginRes.code,
					},
					success: (res) => {
						/**
						 * 判断是否登录
						 * 未登录 则先登录
						 * 已登录 进入制作页面
						*/ 
					   if (res.data.code === 101) {
						   registerUser(detail.detail)
					   } else if (res.data.code === 200) {
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('user', res.data.user)
							close()
							emits('success')
					   }
					},
					fail: (error) => {
						console.log(error);
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			}
		});
	}
	
	
	// 新用户登录
	function registerUser(detail) {
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				uni.request({
					url: `${getApp().globalData.baseUrl}/prod-api/wechat/weapp/login`,
					method: 'POST',
					data: {
						code: loginRes.code,
						encrypted_data: detail.encryptedData,
						iv: detail.iv
					},
					success: (res) => {
						if (res.data.code === 200) {
							close()
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('user', res.data.user)
							emits('success')
						}
					},
					fail: (error) => {
						console.log(error);
					}
				});
			}
		});
	}
	
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 60rpx 30rpx 60rpx;
		box-sizing: border-box;
		.logo {
			width: 180rpx;
			height: 180rpx;
			display: block;
			margin: 0 auto 40rpx;
		}
		.name {
			font-size: 40rpx;
			font-weight: bold;
			color: #FF6B00;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.btn-box {
			width: 520rpx;
			margin: 0 auto 30rpx;
		}
		.text-btn {
			text-align: center;
			font-size: 28rpx;
			color: #999999;
			margin-bottom: 40rpx;
		}
		.agreement-box {
			font-size: 28rpx;
			color: #999999;
			text-align: center;
			.checkbox-box {
				display: inline-flex;
				vertical-align: middle;
			}
			.text-box {
				display: inline-flex;
				vertical-align: middle;
			}
		}
	}
</style>